<template>
	<container-item-wrapper :widget="widget">
		<el-card :key="widget.id" class="card-container" :class="[!!widget.options.folded ? 'folded' : '', customClass]"
				 :shadow="widget.options.shadow" :style="{width: widget.options.cardWidth + '!important' || ''}"
				 :ref="widget.id" v-show="!widget.options.hidden">
			<template #header>
				<div class="clear-fix">
					<span>{{ widget.options.label }}</span>
					<i v-if="widget.options.showFold" class="float-right" @click="toggleCard">
						<template v-if="!widget.options.folded">
							<el-icon>
								<ArrowDown/>
							</el-icon>
						</template>
						<template v-else>
							<el-icon>
								<ArrowUp/>
							</el-icon>
						</template>
					</i>
				</div>
			</template>
			<template v-if="!!widget.widgetList && (widget.widgetList.length > 0)">
				<template v-for="(subWidget, swIdx) in widget.widgetList">
					<template v-if="'container' === subWidget.category">
						<component :is="subWidget.type + '-item'" :widget="subWidget" :key="swIdx" :parent-list="widget.widgetList"
								   :index-of-parent-list="swIdx" :parent-widget="widget">
							<!-- 递归传递插槽！！！ -->
							<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
								<slot :name="slot" v-bind="scope"/>
							</template>
						</component>
					</template>
					<template v-else>
						<component :is="subWidget.type + '-widget'" :field="subWidget" :designer="null" :key="swIdx" :parent-list="widget.widgetList"
								   :index-of-parent-list="swIdx" :parent-widget="widget">
							<!-- 递归传递插槽！！！ -->
							<template v-for="slot in Object.keys($slots)" v-slot:[slot]="scope">
								<slot :name="slot" v-bind="scope"/>
							</template>
						</component>
					</template>
				</template>
			</template>
		</el-card>
	</container-item-wrapper>
</template>

<script>
import FieldComponents from '@/components/designer/form-designer/form-widget/field-widget/index'
import emitter from '@/utils/emitter'
import ContainerItemWrapper from "@/components/designer/form-render/container-item/index"
import refMixin from "@/components/designer/form-render/refMixin"
import containerItemMixin from "@/components/designer/form-render/container-item/containerItemMixin"
import {ArrowDown, ArrowUp} from '@element-plus/icons-vue'

export default {
	name: "card-item",
	componentName: 'ContainerItem',
	mixins: [emitter, refMixin, containerItemMixin],
	components: {
		...ContainerItemWrapper,
		ArrowDown,
		ArrowUp,
		...FieldComponents
	},
	props: {
		widget: Object,
	},
	data() {
		return {
			thisWidget: this.widget
		}
	},
	watch: {
		'widget': {
			handler(val) {
				if (val) {
					this.thisWidget = val
				}
			}
		},
	},
	inject: ['refList', 'sfRefList', 'globalModel'],
	computed: {
		customClass() {
			return this.widget.options.customClass || ''
		},

	},
	created() {
		this.initRefList()
	},
	beforeUnmount() {
		this.unregisterFromRefList()
	},
	methods: {
		toggleCard() {
			this.thisWidget.options.folded = !this.thisWidget.options.folded
		},

	},
}
</script>

<style lang="scss" scoped>
:deep(.el-card__header) {
	padding: 10px 12px;
}

.folded :deep(.el-card__body) {
	display: none;
}

.clear-fix:before, .clear-fix:after {
	display: table;
	content: "";
}

.clear-fix:after {
	clear: both;
}

.float-right {
	float: right;
}

</style>
